﻿<div data-dojo-attach-point="browserContainer" class="browser">
    <input placeholder="Search for..." type="text" data-bind="value:phrase"/>
    <select data-bind="options: players, optionsText: 'name', optionsValue: 'playerId', value: selectedPlayer, optionsCaption: 'Choose the player...'"></select>
    <div class="nano">
        <div class="content">
            <ul data-bind="foreach: videos">
                <li data-bind="css: { active: id() == $root.selectedItem() }">
                    <a data-bind="click: $root.view" href="javascript:void(0);">
                        <span class="list-img" data-bind="style: { backgroundImage: thumbnailUrl}, text: name"></span>
                        <h3 data-bind="truncatedText: name, length: 27"></h3>
                        <span class="date" data-bind="appendText: publishedDate">Published on: </span>
                    </a>        
                </li>                                                               
            </ul>
        </div>
    </div>
    <p data-bind="visible: isLoading">Loading...</p>
</div>
